<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <style type="text/css">
        .panel *{
            /*width: 100%;*/
            margin: 3px auto;
            text-align: center;
        }
    </style>

    <script>
        window.onload = function () {
            var id = getQueryVariable("id");



            $("#id").val(id);
            // alert(id);
            $.post("../toUpdate",{"id":id},function (person) {

                $("#pic").attr('src',"../img/person/"+person.id+".jpg");
                // alert(person.name);
                $('#name').val(person.name);

                var radios = $(".sexRadio");
                if (person.sex == "男")  {
                    radios.eq(0).prop("checked", true);
                    radios.eq(1).prop("checked", false);
                }else {
                    radios.eq(1).prop("checked", true);
                    radios.eq(0).prop("checked", false);
                }

                $("#telephone").val(person.telephone);

                // alert(person.hobby[2].name)

                for (var i = 0;i<person.hobby.length;i++){
                    $("input:checkbox[value="+person.hobby[i].name+"]").attr('checked','true');
                    // "+person.hobby[i].name+"
                }


            },"json");

        }

        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }
    </script>
</head>
<body>
<div class="panel panel-warning addDiv">
    <div class="panel-heading">修改员工信息</div>
    <div class="panel-body">
        <form method="POST" id="addForm" action="../q2Update" enctype="multipart/form-data">
            <table class="addTable">
                <input id="id" name="id" type="text" style="display: none">
                <tr>
                    <td><img id="pic" height="200px" style="margin: 40px" src=""></td>
                </tr>
                <tr>
                    <td>名称</td>
                    <td><input  id="name" name="name" type="text" class="form-control"></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <label><input name="sex" class="sexRadio" type="radio" value="男" />男 </label>
                        <label><input name="sex" class="sexRadio" type="radio" value="女" />女 </label>
                    </td>
                </tr>
                <tr>
                    <td>电话号</td>
                    <td><input id="telephone" name="telephone" type="text"></td>
                </tr>
                <tr>
                    <td>爱好</td>
                    <td>
                        <label><input name="hobby[0].name" type="checkbox" value="唱歌" />唱歌 </label>
                        <label><input name="hobby[1].name" type="checkbox" value="跳舞" />跳舞 </label>
                        <label><input name="hobby[2].name" type="checkbox" value="画画" />画画 </label>
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td>
                        <input id="inputPic" accept="image/*" type="file" name="image" />
                    </td>
                </tr>
                <tr class="submitTR">
                    <td colspan="2" align="center">
                        <button type="" class="btn btn-success" >提 交</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>